<template>
  <div class="bargain">
    <ContentBox title="砍价免费拿" @left="back" :fixed="true" :ostyle="style">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')" class="not"></notice>
    <div class="content">
      <div class="shop-intro">
        <div class="shop-item clear">
          <div class="pic">
            <van-image :src="kjData.cart.product.image" height="1.8rem" width="1.8rem">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error></template>
            </van-image>
          </div>
          <div class="contact ">
            <p class="txt">{{kjData.cart.product.store_name}}</p>
            <p class="status"><span>正品保证</span><span v-if="0">包邮</span></p>
            <!-- <div class="time clear">
              <van-count-down :time="time" class="fl">
                <template v-slot="timeData">
                  <span class="item public">{{ timeData.hours }}</span>
                  <span class="item public">{{ timeData.minutes }}</span>
                  <span class="item">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
              <span class="fl">{{statusText}}</span>
            </div> -->
          </div>
        </div>
        <div class="finsh">已砍<span>{{kjData.bargained}}</span>元，还差<span>{{result}}</span>元</div>
        <div class="plan">
          <van-progress
            pivot-text=""
            :show-pivot="false"
            color="#FFC824"
            :percentage="percent"
            stroke-width="8px"
          />
        </div>
        <!-- <div class="help_me">帮我砍一刀有机会获得10-1000积分</div> -->
        <div class="friend">
          <div class="ensure" @click="doKJ" v-if="!mine">帮好友砍一刀</div>
          <div class="ensure" @click="shareTip = true" v-else>邀请好友砍一刀</div>
        </div>
      </div>
      <div class="toHome" @click="toHome">返回商城首页</div>

      <!-- <div class="friend-list">
        <h3 class="title">我的砍价帮</h3>
        <div class="list">
          <div class="info" v-for="(item,index) in 6" :key="index">
             <div class="bg">
              <van-image :src="$img('wxpay.png')" round height="0.72rem" width="0.72rem">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error></template>
              </van-image>
             </div>
             <div class="person">
               <div class="name">小李子说</div>
               <div class="date">2020-01-02 16：40：32</div>
             </div>
             <div class="result">砍掉24.54元</div>
          </div>
        </div>
      </div> -->
    </div>
    <van-overlay :show="showLoad" @click="showLoad = false" z-index="99">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="avater">
            <van-image :src="$img('wxpay.png')" round height="1.2rem" fit="cover" width="1.2rem">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error></template>
            </van-image>
          </div>
          <div class="text">
            谢谢你帮我砍了18.59元
          </div>
          <!-- <div class="send">赠送你599积分</div> -->
          <div class="img" :style="{backgroundImage: `url(${$img('gold.png')})`}"></div>
          <div class="ensure" @click="showLoad = false">我知道了</div>
        </div>
      </div>
    </van-overlay>
    <img :src="$img('share.png')" class="shareTip" v-if="shareTip" @click="shareTip = false">
  </div>
</template>

<script>
export default {
  data () {
    return {
      style: {
        background: '#ffffff',
        color: '#000'
      },
      time: 30 * 60 * 60 * 1000,
      timeData: {
        hours: 1,
        minutes: 23,
        seconds: 0
      },
      showLoad: false,
      statusText: '砍价过期',
      kjData: '',
      thisId: '',
      mine: false,
      shareTip: false,
      bargain_price: ''
    }
  },
  computed: {
    result () {
      return this.kjData.cart.product.bargain_price - this.kjData.bargained
    },
    percent () {
      const total = this.kjData.cart.product.bargain_price
      const num = this.kjData.bargained
      if (isNaN(num) || isNaN(total)) {
        return 0
      }
      return total <= 0 ? 0 : (Math.round(num / total * 10000) / 100)
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    getKJDetail () {
      this.$axios.get(`/api/order/bargain_detail/${this.$route.params.id}`).then(res => {
        if (res.status === 200) {
          this.kjData = res.data
          if (this.thisId === res.data.uid) {
            this.mine = true
          }
        }
      })
    },
    doKJ () {
      this.$axios.get(`/api/order/bargain_order/${this.$route.params.id}`).then(res => {
        if (res.status === 200) {
          this.showLoad = true
          this.bargain_price = res.data.bargain_price
          this.getKJDetail()
        } else if (res.status < 4000) {
          this.$dialog({ message: res.msg })
        }
      })
    },
    toHome () {
      this.$router.push('/index')
    }
  },
  created () {
    this.thisId = this.$store.state.uifo.uid
    this.getKJDetail()
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>
